<template>
  <section class="news">
    <template v-for="item in newsList">
      <div class="new" :key="item.id">
        <el-image
          style="width: 320px; height: 160px"
          :src="item.frontCover"
          fit="fit"
        ></el-image>
        <div class="content">
          <h3>
            <span class="title">{{ item.title }}</span>
            <span class="time">{{ item.createdAt }}</span>
          </h3>
          <div class="main">{{ item.introduction | substr }}</div>
          <footer>
            <el-button type="primary" plain @click="toDetail(item.id)"
              >查看详情</el-button
            >
            <span class="count">{{ item.visitCount }}人浏览</span>
          </footer>
        </div>
      </div>
    </template>
  </section>
</template>

<script>
import { getNewsList } from "@/api/api.js";
export default {
  name: "List",
  props: {
    newType: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      newsList: [],
      page: 1,
      page_size: 10,
      total: 0,
    };
  },
  created() {
    this.getNewsList();
  },
  watch: {
    "$store.state.user.scroll": function(val) {
      if (this.newsList.length < this.total) {
        console.info("刷新", val);
        this.page++;
        this.getNewsList();
      }
    },
  },
  methods: {
    getNewsList() {
      getNewsList({
        type: this.newType,
        page_size: this.page_size,
        page: this.page,
      }).then((res) => {
        console.info("新闻列表", res);
        this.newsList = this.newsList.concat(res.data.list);
        this.total = res.data.total;
      });
    },
    toDetail(id) {
      this.$router.push({ path: "/NewsDetail", query: { id: id } });
    },
  },
  filters: {
    substr: function(value) {
      if (value.length > 100) {
        value = value.substring(0, 100) + "……";
      }
      return value;
    },
  },
};
</script>

<style lang="scss" scoped>
.news {
  .new {
    padding: 25px 0;
    border-bottom: 1px solid #ebeef5;
    display: flex;
    justify-content: space-between;
    min-width: 0;

    .content {
      text-align: left;
      width: 820px;

      h3 {
        font-size: 20px;
        line-height: 26px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #3378ff;
        margin-bottom: 20px;

        .time {
          font-size: 14px;
          line-height: 18px;
          color: #909399;
        }
      }

      .main {
        height: 54px;
        font-size: 16px;
        line-height: 27px;
        color: #909399;
        margin-bottom: 20px;
        word-break: break-all;
      }

      footer {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .count {
          font-size: 14px;
          line-height: 18px;
          color: #909399;
        }
      }
    }
  }
}
</style>
